"use client"

import React, { useState } from 'react'
import Image from 'next/image'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog'
import { cn } from '@/lib/utils'
import { DIALOG_CONTENT } from '@/lib/constants/bottom-navigation'

interface PaymentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

/**
 * 打赏弹窗组件
 */
export function PaymentDialog({ open, onOpenChange }: PaymentDialogProps) {
  const [selectedPayment, setSelectedPayment] = useState<'alipay' | 'wechat'>('alipay')

  const paymentMethods = [
    {
      id: 'alipay' as const,
      name: '支付宝',
      icon: '💰',
      image: DIALOG_CONTENT.payment.alipayImage,
      color: 'bg-blue-500'
    },
    {
      id: 'wechat' as const,
      name: '微信支付',
      icon: '💬',
      image: DIALOG_CONTENT.payment.wechatPayImage,
      color: 'bg-green-500'
    }
  ]

  const selectedMethod = paymentMethods.find(method => method.id === selectedPayment)

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-center">
            {DIALOG_CONTENT.payment.title}
          </DialogTitle>
          <DialogDescription className="text-sm text-muted-foreground text-center">
            如果这个网站对您有帮助，请考虑给我们一点支持 ❤️
          </DialogDescription>
        </DialogHeader>
        
        <div className="mt-4 space-y-4">
          {/* 支付方式选择 */}
          <div className="flex gap-2 p-1 bg-muted rounded-lg">
            {paymentMethods.map((method) => (
              <button
                key={method.id}
                type="button"
                className={cn(
                  'flex-1 flex items-center justify-center gap-2',
                  'py-2 px-3 rounded-md text-sm font-medium',
                  'transition-all duration-200',
                  selectedPayment === method.id
                    ? 'bg-background text-foreground shadow-sm'
                    : 'text-muted-foreground hover:text-foreground'
                )}
                onClick={() => setSelectedPayment(method.id)}
              >
                <span className="text-base">{method.icon}</span>
                <span>{method.name}</span>
              </button>
            ))}
          </div>

          {/* 二维码显示区域 */}
          <div className="flex flex-col items-center space-y-4">
            <div className="relative w-48 h-48 bg-white rounded-lg shadow-sm border overflow-hidden">
              {selectedMethod && (
                <Image
                  src={selectedMethod.image}
                  alt={`${selectedMethod.name}支付二维码`}
                  width={192}
                  height={192}
                  className="w-full h-full object-contain"
                  priority
                  onError={(e) => {
                    console.error(`Failed to load ${selectedMethod.name} QR code image:`, e)
                  }}
                  onLoad={() => {
                    console.log(`${selectedMethod.name} QR code image loaded successfully`)
                  }}
                />
              )}
            </div>

            <div className="text-center space-y-2">
              <p className="text-sm font-medium">
                使用{selectedMethod?.name}扫描上方二维码
              </p>
              <p className="text-xs text-muted-foreground">
                感谢您的支持！❤️
              </p>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
} 